import { CSSProperties } from 'react'
import { Button, message, Tooltip } from 'antd'
import { ExportOutlined } from '@ant-design/icons'

import { VCenterEmpty } from './VCenterEmpty'

export const EmailbodyPreview = ({
  htmlBody,
  style,
  className,
}: {
  htmlBody: string | null | undefined
  style?: CSSProperties
  className?: string
}) => {
  htmlBody = htmlBody?.trim()

  return (
    <div
      style={{
        ...style,
        overflow: 'hidden',
        height: style?.height || 360,
        position: 'relative',
      }}
      className={className}
    >
      {!htmlBody && <VCenterEmpty />}
      {!!htmlBody && (
        <>
          <iframe
            style={{
              width: '100%',
              height: '100%',
              border: 0,
            }}
            // 必须为空串，否则有安全问题
            sandbox=""
            srcDoc={htmlBody}
          />
          <Tooltip title="新窗口打开">
            <Button
              style={{ position: 'absolute', top: 10, right: 30, border: 0, opacity: 0.7 }}
              shape="circle"
              icon={<ExportOutlined />}
              onClick={() => {
                const newWindow = window.open('', '_blank')
                if (!newWindow) return void message.error('内容写入失败')
                newWindow?.document.open()
                newWindow?.document.write(htmlBody)
                newWindow?.document.close()
              }}
            />
          </Tooltip>
        </>
      )}
    </div>
  )
}
